<template>
  <a-modal
    :title="title"
    width="720px"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="类型">
            <a-select v-model="form.type">
              <a-select-option value="SharedSecret">
                Shared Secret
              </a-select-option>
              <a-select-option value="X509Thumbprint">
                X509 Thumbprint
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="描述">
            <a-input v-model="form.description" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="值" prop="value">
            <a-input v-model="form.value" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="到期">
            <a-date-picker v-model="form.expiration" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" style="width:100%;" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      title: '新增Secrets',
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        type: 'SharedSecret'
      },
      rules: {
        value: [{ required: true, message: "请输入值", trigger: "blur" }],
      },
    }
  },
  methods: {
    showModal() {
      this.title = '新增';
      this.visible = true;
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit("ok", this.form);
          this.handleCancel();
        } else {
          return false;
        }
      });
    },
    handleCancel() {
      this.form = {
        type: 'SharedSecret'
      };
      this.$refs.ruleForm.clearValidate();
      this.visible = false;
    },
  },
}
</script>

<style>

</style>